<template>
  <div class="mind-map-container">
    <div class="tool">
      <a-button type="primary" @click="addNode">添加</a-button>
    </div>
    <div id="mindContainer"></div>
  </div>
</template>
<script>
  import { Graph, Shape } from '@antv/x6';
  import MindNode from './node/index.vue';

  const mindData = {
    // 节点
    nodes: [
      {
        id: 'node1', // String，可选，节点的唯一标识
        x: 40, // Number，必选，节点位置的 x 值
        y: 40, // Number，必选，节点位置的 y 值
        width: 80, // Number，可选，节点大小的 width 值
        height: 40, // Number，可选，节点大小的 height 值
        label: 'hello', // String，节点标签
      },
      {
        id: 'node2', // String，节点的唯一标识
        x: 160, // Number，必选，节点位置的 x 值
        y: 180, // Number，必选，节点位置的 y 值
        width: 80, // Number，可选，节点大小的 width 值
        height: 40, // Number，可选，节点大小的 height 值
        label: 'world', // String，节点标签
      },
    ],
    // 边
    edges: [
      {
        source: 'node1', // String，必须，起始节点 id
        target: 'node2', // String，必须，目标节点 id
      },
    ],
  };

  export default {
    data() {
      return {
        graph: null,
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.graph = new Graph({
          container: document.getElementById('mindContainer'),
          grid: {
            size: 1,
          },
          connecting: {
            connector: 'smooth',
          },
        });
      },

      addNode() {
        this.graph.addNode({
          x: 300,
          y: 100,
          width: 250,
          height: 100,
          shape: 'html',
          data: {
            time: new Date().toString(),
          },
          html: {
            render(node) {
              const data = node.getData();

              return `<div class="node">
                <span class="add" onClick="add()">add</span>
              </div>`;
            },
            shouldComponentUpdate(node) {
              // 控制节点重新渲染
              return node.hasChanged('data');
            },
          },
        });
      },
    },
  };
</script>
<style lang="scss">
  .mind-map-container {
    height: 100%;
    background: #fff;
    position: relative;
    .tool {
      position: absolute;
      z-index: 1;
    }
    #mindContainer {
      height: 100%;
      width: 100%;
    }
    .node {
      border: solid #ddd 1px;
      height: 100%;
      width: 100%;
      border-radius: 4px;
      position: relative;
      .add {
        position: absolute;
        right: 0;
      }
    }
  }
</style>
